<div class="container">
  <div class="page-header">
    <h1 class="page-title">
      工作台
    </h1>
  </div>
  <div class="row row-cards">
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-green">
            6%
            <i class="fe fe-chevron-up"></i>
          </div>
          <div class="h1 m-0"><%= User.today.count %></div>
          <div class="text-muted mb-4">今日新增会员</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -3%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0"><%= User.by_week.count %></div>
          <div class="text-muted mb-4">本周新增会员</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-green">
            9%
            <i class="fe fe-chevron-up"></i>
          </div>
          <div class="h1 m-0"><%= Order.today.count %></div>
          <div class="text-muted mb-4">今日订单</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-green">
            3%
            <i class="fe fe-chevron-up"></i>
          </div>
          <div class="h1 m-0"><%= Order.today.sum(:total_fee) %></div>
          <div class="text-muted mb-4">今日销售额</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -2%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0"><%= Order.yesterday.count %></div>
          <div class="text-muted mb-4">昨天订单</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -1%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0"><%= Order.yesterday.sum(:total_fee) %></div>
          <div class="text-muted mb-4">昨天销售额</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -1%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0"><%= Order.by_week.count %></div>
          <div class="text-muted mb-4">本周订单数</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -1%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0"><%= Order.by_week.sum(:total_fee) %></div>
          <div class="text-muted mb-4">本周销售额</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -1%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0"><%= Order.by_month.count %></div>
          <div class="text-muted mb-4">本月订单</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -1%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0"><%= Order.by_month.sum(:total_fee) %></div>
          <div class="text-muted mb-4">本月销售额</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -1%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0"><%= Settle.where(state: :pending).count %></div>
          <div class="text-muted mb-4">待处理结算</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -1%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0"><%= Shop.where(state: :pending).count %></div>
          <div class="text-muted mb-4">待处理商户</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 col-lg-2">
      <div class="card">
        <div class="card-body p-3 text-center">
          <div class="text-right text-red">
            -1%
            <i class="fe fe-chevron-down"></i>
          </div>
          <div class="h1 m-0"><%= Shop.count %></div>
          <div class="text-muted mb-4">商户总数</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-cards">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">本年度成交走势</h3>
        </div>
        <div class="card-body">
          <canvas id="sales-volumn-canvas"></canvas>
        </div>
      </div>
      <script>
        var chartData = {
          labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          datasets: [{
            type: 'line',
            label: '月成交量',
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 2,
            fill: false,
            data: [
              <% (1..12).each do |n| %>
                <%= Order.by_month(n).sum(:total_fee) %>,
              <% end %>
            ]
          }]
        };
        window.onload = function() {
          var ctx = document.getElementById('sales-volumn-canvas').getContext('2d');
          window.myMixedChart = new Chart(ctx, {
            type: 'bar',
            data: chartData,
            options: {
              responsive: true,
              tooltips: {
                mode: 'index',
                intersect: true
              }
            }
          });
        };
      </script>
    </div>
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">会员消费排行</h3>
        </div>
        <div class="table-responsive">
          <table class="table card-table table-striped table-vcenter">
            <thead>
              <tr>
                <th colspan="2">会员名字</th>
                <th>会员电话</th>
                <th>消费总额</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <% User.limit(5).each do |user| %>
              <tr>
                <td class="w-1">
                  <div class="avatar d-block" style="background-image: url(<%= user.avatar.url %>)">
                    <span class="avatar-status bg-green"></span>
                  </div>
                </td>
                <td><%= user.name %></td>
                <td><%= user.phone %></td>
                <td class="text-nowrap">May 6, 2018</td>
                <td class="w-1">
                  <a href="<%= admin_user_path(user) %>" class="dropdown-item"><i class="fe fe-trash"></i> </a>
                </td>
              </tr>
              <% end %>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-6">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">会员男女比例</h3>
            </div>
            <div class="card-body">
              <canvas id="manOrWomanChart" width="400" height="400"></canvas>
            </div>
          </div>
          <script>
            var ctx = document.getElementById("manOrWomanChart").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'pie',
                data: {
                datasets: [{
                  data: [<%= User.where(sex: :male).count %>, <%= User.where(sex: :female).count %>],
                  backgroundColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)"]
                }],
                labels: [
                  '男',
                  '女'
                ],
                options: {}
              }
            });
            </script>
        </div>
        <div class="col-sm-6">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">会员分布区域</h3>
            </div>
            <div class="card-body">
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
  <div class="row row-cards row-deck">
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">待处理商户</h3>
        </div>
        <div class="table-responsive">
          <table class="table card-table table-striped table-vcenter">
            <thead>
              <tr>
                <th>商铺名字</th>
                <th>商铺电话</th>
                <th>申请时间</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <% Shop.where(state: :pending).order("updated_at DESC").limit(5).each do |shop| %>
              <tr>
                <td><%= shop.name %></td>
                <td><%= shop.phone %></td>
                <td class="text-nowrap"><%= formattime(shop.created_at, unit: "day") %></td>
                <td class="w-1"><a href="<%= edit_admin_shop_path(shop) %>" class="icon"><i class="fe fe-edit"></i></a></td>
              </tr>
              <% end %>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">待处理结算</h3>
        </div>
        <div class="table-responsive">
          <table class="table card-table table-striped table-vcenter">
            <thead>
              <tr>
                <th>商铺名字</th>
                <th>结算金额</th>
                <th>申请日期</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <% Settle.where(state: :pending).order("updated_at DESC").limit(5).each do |settle| %>
              <tr>
                <td><%= settle.shop.name %></td>
                <td><%= settle.fee %></td>
                <td class="text-nowrap"><%= formattime(settle.created_at, unit: "day") %></td>
                <td class="w-1"><a href="<%= edit_admin_settle_path(settle) %>" class="icon"><i class="fe fe-edit"></i></a></td>
              </tr>
              <% end %>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-cards row-deck">
    <div class="col-sm-6 col-lg-4">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">商品销售排行</h4>
        </div>
        <table class="table card-table">
          <tbody>
          <% Spu.order("sales_volume DESC").limit(10).each do |spu| %>
            <tr>
              <td><%= spu.name %></td>
              <td><%= spu.sales_volume %></td>
              <td class="text-nowrap"><%= spu.shop_category.name %></td>
              <td class="w-1"><a href="<%= edit_admin_spu_path(spu) %>" class="icon"><i class="fe fe-chevron-right"></i></a></td>
            </tr>
          <% end %>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">Projects</h2>
        </div>
        <table class="table card-table">
          <tbody><tr>
            <td>Admin Template</td>
            <td class="text-right">
              <span class="badge badge-default">65%</span>
            </td>
          </tr>
          <tr>
            <td>Landing Page</td>
            <td class="text-right">
              <span class="badge badge-success">Finished</span>
            </td>
          </tr>
          <tr>
            <td>Backend UI</td>
            <td class="text-right">
              <span class="badge badge-danger">Rejected</span>
            </td>
          </tr>
          <tr>
            <td>Personal Blog</td>
            <td class="text-right">
              <span class="badge badge-default">40%</span>
            </td>
          </tr>
          <tr>
            <td>E-mail Templates</td>
            <td class="text-right">
              <span class="badge badge-default">13%</span>
            </td>
          </tr>
          <tr>
            <td>Corporate Website</td>
            <td class="text-right">
              <span class="badge badge-warning">Pending</span>
            </td>
          </tr>
        </tbody></table>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Members</h3>
        </div>
        <div class="card-body o-auto" style="height: 15rem">
          <ul class="list-unstyled list-separated">
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Amanda Hunt</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">amanda_hunt@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Laura Weaver</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">lauraweaver@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Margaret Berry</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">margaret88@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Nancy Herrera</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">nancy_83@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Edward Larson</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">edward90@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-separated-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-md d-block"></span>
                </div>
                <div class="col">
                  <div>
                    <a href="javascript:void(0)" class="text-inherit">Joan Hanson</a>
                  </div>
                  <small class="d-block item-except text-sm text-muted h-1x">joan.hanson@example.com</small>
                </div>
                <div class="col-auto">
                  <div class="item-action dropdown">
                    <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>